@import "../../../style/default";

// Main Nav
$aside-menu-prefix-cls: sidebar-menu;

.#{$aside-menu-prefix-cls} {
  display: block;
  font-size: $aside-menu-fs;
  margin: 0 0 30px;
  padding: 0;
  .sidebar-menu-group-title-selected {
    color: $aside-menu-text-hover-color;
    background: $aside-menu-selected-bg-h-color;
    border-left: $aside-menu-border-left-h-color;
    box-shadow: $aside-menu-selected-box-shadow;
    i {
      min-width: 14px;
      display: inline-block;
      margin-right: $aside-menu-group-title-selected;
      transition: font-size .15s cubic-bezier(.215, .61, .355, 1), margin .3s cubic-bezier(.645, .045, .355, 1);
    }
  }
  > li {
    position: relative;
    border-left: 3px solid transparent;
    transition: border-left-color 0.4s ease;
    &.#{$aside-menu-prefix-cls}-group-title {
      color: $aside-menu-group-text-color;
      padding: $aside-menu-group-text-padding;
      font-size: $aside-menu-group-title-fs;
      cursor: pointer;
      .#{$aside-menu-prefix-cls}-group-title-content {
        max-width: 140px;
        padding: $aside-menu-padding-top-bottom 0;
        text-align: $aside-menu-group-align;
        .#{$aside-menu-prefix-cls}-group-icon {
          display: $aside-menu-group-display;
          font-size: $aside-menu-group-icon-fs;
        }
        .#{$aside-menu-prefix-cls}-group-text {
          display: $aside-menu-group-display;
          font-size: $aside-menu-group-text-fs;
        }
      }
      .sidebar-menu-group-text {
        font-weight: 700;
      }
      &:hover {
        color: $aside-menu-group-text-hover-color;
        background: $aside-menu-selected-bg-h-color;
        border-left: $aside-menu-border-left-h-color;
        box-shadow: $aside-menu-selected-box-shadow;
      }
    }
  }
  .sidebar-menu-query {
    padding: 0 8px;
    text-align: center;
    border: 0;
    margin-bottom: 16px;
  }
  .#{$style-prefix}-input {
    background: $aside-menu-input-bg;
    &-suffix {
      color : $aside-menu-input-suffix-color;
    }
  }
}

// Desktop
@media (min-width: $screen-md-min) {
  .aside-collapsed {
    .aside {
      width: $aside-collapsed-wd;
    }
    .#{$aside-menu-prefix-cls} {
      > li {
        border: $aside-menu-collapsed-border;
        &.#{$aside-menu-prefix-cls}-group-title {
          .sidebar-menu-group-icon {
            font-size: $aside-menu-collapsed-fs;
          }
          .sidebar-menu-group-text {
            display: $aside-menu-collapsed-display;
          }
        }
      }
    }
    .nav-loading {
      left: 18%;
    }
    .switch-menu {
      display: none;
    }
  }
}

// Under pad
@media (max-width: $screen-sm-max) {
  .aside,
  .content {
    transition: transform 0.3s ease;
  }

  .content {
    transform: translate3d($aside-wd, 0, 0);
    margin: 100px 0 0 0;
    height: calc(100vh - 100px);
  }
  .content.fn-content {
    margin: 131px 0 0 0;
  }
  .apes-form-container {
    position: absolute;
    top: 34px;
    background-color: #e8e8e8;
    padding: 16px 0 0 16px;
  }

  .aside-collapsed {
    .aside {
      transform: translate3d(-100%, 0, 0);
    }
    .content {
      transform: translateZ(0);
      //margin: 100px 0 0 0;
      //height: calc(100vh - 100px);
    }
  }
}

@media (min-width: $screen-xxl-min) {
  .sidebar-menu-content {
    max-width: 550px !important;
    min-width: 550px !important;
  }
}

.nav-loading {
  position: absolute;
  top: 45%;
  left: 38%;
  .k-ball7a {
    border: 0;
    margin: 0;
    width: 16px;
    height: 16px;
    position: absolute;
    border-radius: 50%;
    animation: k-loadingO 2s ease infinite;
    background: #00a09d;
    animation-delay: -1.5s
  }
  .k-ball7b {
    border: 0;
    margin: 0;
    width: 16px;
    height: 16px;
    position: absolute;
    border-radius: 50%;
    animation: k-loadingO 2s ease infinite;
    background: #008784;
    animation-delay: -1s
  }
  .k-ball7c {
    border: 0;
    margin: 0;
    width: 16px;
    height: 16px;
    position: absolute;
    border-radius: 50%;
    animation: k-loadingO 2s ease infinite;
    background: #006361;
    animation-delay: -0.5s
  }
  .k-ball7d {
    border: 0;
    margin: 0;
    width: 16px;
    height: 16px;
    position: absolute;
    border-radius: 50%;
    animation: k-loadingO 2s ease infinite;
    background: #003a39;
  }
}

.no-permission {
  text-align: center;
  font-size: 16px;
  color: #008784;
}

@keyframes k-loadingO {
  0%, 100% {
    transform: translate(0)
  }
  25% {
    transform: translate(160%)
  }
  50% {
    transform: translate(160%, 160%)
  }
  75% {
    transform: translate(0, 160%)
  }
}

.sidebar-menu-list-content {
  list-style: none;
  font-size: 14px;
  max-width: 38vw;
  min-width: 38vw;
  margin: 0;
  padding: 0;
  line-height: 2;
  .sidebar-menu-content-level3 {
    position: relative;
    padding-bottom: 10px;
    margin-left: 105px;
    .sidebar-menu-content-title {
      position: absolute;
      left: -126px;
      width: 120px;
      //padding: 6px 0;
      line-height: 1;
      text-align: right;
      span {
        display: inline-block;
        height: 28px;
        padding: 8px;
        font-weight: 700;
        border-radius: 4px;
      }
    }
    .sidebar-menu-content-list {
      .sidebar-menu-content-link {
        border-left: 1px solid #e0e0e0;
        &:hover {
          > a {
            color: $aside-menu-text-hover-color;
            background: $aside-menu-con-selected-bg-color;
          }
        }
        > a {
          padding: 8px;
          height: 28px;
          color: $aside-menu-text-color;
          border-radius: 4px;
          line-height: 1;
          display: inline-block;
          white-space: nowrap;
        }
      }
    }
  }
  .sidebar-menu-content-level2 {
    position: relative;
    padding-bottom: 10px;
    .sidebar-menu-content-list {
      .sidebar-menu-content-link {
        padding: 0 8px;
        height: 16px;
        line-height: 16px;
        display: inline-block;
        white-space: nowrap;
        &:hover {
          > a {
            color: $aside-menu-text-hover-color;
            background: $aside-menu-con-selected-bg-color;
          }
        }
      }
    }
  }
  .sidebar-menu-content-selected {
    .sidebar-menu-content-title {
      span {
        color: $aside-menu-text-hover-color;
        background: $aside-menu-con-selected-bg-color;
      }
    }
    .sidebar-menu-content-link-selected {
      > a {
        color: $aside-menu-text-hover-color;
        background: $aside-menu-con-selected-bg-color;
      }
    }
  }

}

.sidebar-menu-query-content {
  list-style: none;
  font-size: 14px;
  max-width: 16vw;
  min-width: 16vw;
  margin: 0;
  padding: 0;
  line-height: 2;
  .sidebar-menu-query-content-link {
    &:hover {
      border-radius: 4px;
      color: $aside-menu-text-hover-color;
      background: $aside-menu-selected-bg-h-color;
    }
    > a {
      display: inline-block;
      width: 100%;
      height: 100%;
    }
  }
}

.sidebar-menu-list {
  .apes-popover-content {
    .apes-popover-arrow {
      top: $aside-menu-pop-arrow-top;
      left: $aside-menu-pop-arrow-left;
      box-shadow: $aside-menu-pop-arrow-shadow;
      display: $aside-menu-pop-arrow-shadow-d;
    }
    .apes-popover-inner {
      position: fixed;
      top: $aside-menu-pop-inner-top;
      left: $aside-menu-pop-inner-left;
      box-shadow: $aside-menu-pop-inner-shadow;
      border-right: $aside-menu-pop-inner-border-right;
      border-radius: $aside-menu-pop-inner-border-radius;
      .apes-popover-inner-content {
        height: $aside-menu-pop-inner-content-hg;
        overflow: auto;
        z-index: 1000;
      }
    }
  }
}

.aside-collapsed ~.cdk-overlay-container{
  .sidebar-menu-list{
    .apes-popover-content {
      .apes-popover-arrow {
        left: $aside-menu-collapsed-arrow-left;
      }
      .apes-popover-inner {
        left: $aside-menu-collapsed-inner-left;
      }
    }
  }
}

.switch-menu {
  position: absolute;
  bottom: 0;
  height: 50px;
  width: 100%;
  text-align: center;
  padding-top: 10px;
  background: #fff;
  > button {
    margin: 0 5px;
  }
}

// 定制样式
.apes-fasttips {
  &:focus{
    background: #fff;
    color: #000b16;
  }
}
